<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>QQ彩贝导航</title>
		<style>
		.fl{
			float: left;
		}
		.fr{
			float: right;
		}
		ul,li{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
			float: left;
		}
		.clearfix{
			clear: both;
			content: "";
			display: table;
		}
		.box{
			width: 100%;
			height: 60px;
			line-height: 60px;
			background: linear-gradient(to top,rgba(241,241,241,1),rgba(255,255,255,1));
		}
		.box .box1{
			width: 1200px;
			margin: 0 auto;
			/*position: relative;*/
		}
		.box .box1 img{
			vertical-align: middle;
			margin-left: 40px;
			margin-top: 10px;
		}
		.box .box1 .nav{
			margin-left: 60px;
		}
		.box .box1 ul{
			vertical-align: middle;
		}
		/*.box .box1 ul li{

			margin-left: 20px;

		}*/
		.box .box1 ul li a{
			height: 70px;
			line-height: 70px;
			text-decoration: none;
			color: black;
			display: inline-block;
		}
		.box .box1 ul li a:hover{
			color: red;
		}
		.box .box1 ul li span{
			margin: 0px 10px;
		}
		.box .box1 .icon img{
			margin-top: 22px;
			margin-left: 10px;
		}
		.box .box1 ul{
			position: relative;
		}
		.box .box1 ul .one .zhuan{
			display:inline-block;
			background: url(img/header_03.png) no-repeat 0px 0px;
			position: absolute;
			width: 120px;
			height: 30px;
		}
		.box .box1 ul .two .hua{
			display:inline-block;
			background: url(img/header_07.png) no-repeat 0px 0px;
			position: absolute;
			width: 120px;
			height: 30px;
		}
		/*.box .box1 ul .one a{

			padding-left: 20px;

		}*/
		@keyframes huakuai{
			0%{
					width: 0px;
				}
				25%{
					width: 30px;
				}
				50%{
					width: 60px;
				}
				75%{
					width: 90px;
				}
				100%{
					width: 120px;
					background:url(img/header_05.png) no-repeat 10px 0px;
				}
		}
		@keyframes donghua{
			0%{
					width: 0px;
				}
				25%{
					width: 30px;
				}
				50%{
					width: 60px;
				}
				75%{
					width: 90px;
				}
				100%{
					width: 120px;
					background:url(img/header_09.png) no-repeat 10px 0px;
				}
		}
		.one a:hover .zhuan{
			animation: huakuai 0.10s linear both;
			background:url(img/header_05.png) no-repeat 10px 0px;
		}
		.two a:hover .hua{
			animation: donghua 0.10s linear both;
			background:url(img/header_09.png) no-repeat 10px 0px;
		}
		.icon{
			margin-top: -8px;
			margin-left: 40px;
		}
		.icon a{
			text-decoration: none;
			margin-left: 5px; 
		}
		.icon a img{
			transition: all .10s;
		}
		.icon a:hover img{
			transform: rotate(360deg);
		}
		</style>
	</head>
	<body>
		<div class="box clearfix">
			<div class="box1">
				<img src="img/logo_170x46.png" class="fl"/>
			<div class="nav fl">
			<ul class="">
				<li class="one">
					<a href="#">
						<span class="zhuan"></span>返回商城
					</a><span>|</span>
				</li>
				<li>
					<a href="#">
						商旅频道
					</a><span>|</span>
				</li>
				<li class="two">
					<a href="#">
						<span class="hua"></span>积分商城
					</a><span>|</span>
				</li>
				<li>
					<a href="#">商旅频道</a><span>|</span>
				</li>
				<li>
					<a href="#">了解彩贝</a><span>|</span>
				</li>
				<li>
					<a href="#">彩贝活动</a><span>|</span>
				</li>
				<li>
					<a href="#">个人中心</a>
				</li>
			</ul>
			</div>
			<div class="icon fl">
				<a href="#">
					<img src="img/iconsB_11.gif" />
				</a>
				<a href="#">
					<img src="img/iconsB_12.gif" />
				</a>
				<a href="#">
					<img src="img/iconsB_13.png" />
				</a>
			</div>
			</div>
		</div>
	</body>
</html>
